
.strokeStyle(@width, @color) {
    stroke: @color;
    stroke-width: @width;
}
.textFS(@fontSize, @color) {
    font-size: @fontSize;
    fill: @color;
}

@activeColor: #40a9ff;
.nodeChart {
    width: 100%;
    // height: 60vh;
    overflow-y: auto;
    overflow-x: hidden;
    .cluster {
        &:nth-child(2n) {
            .bg_rect {
                fill: #FFFFFF;
                fill: transparent;
            }
        }
        &:nth-child(2n + 1) {
            .bg_rect {
                fill: #F2F3FC;
                fill: transparent;
            }
        }
        .node_box {
            stroke-width: 1px;
        }
        .node_name {
            fill: #888888;
            font-size: 13px;
        }
        .mask_rect {
            fill: #00000070;
        }
    }
    .left_name {
        .textFS(14px, #888888);
    }
    .left_line {
        .strokeStyle(2px, #bdbdbd);
    }
    .left_sum {
        .textFS(16px, #888888);
        font-weight: 500;
    }
    .line_path {
        .strokeStyle(2px, #bdbdbd);
    }
    .tooltip_line_path{
        opacity: 1;
        .strokeStyle(0.8, #d8d8d8)
    }
    .right_btn_warp {
        cursor: pointer;
        .right_button {
            .strokeStyle(1px, #e6e6e6);
            fill: #FFFFFF!important;
            width: 80px;
            height: 24px;
        }
        .right_button_text {
            stroke: @activeColor;
            font-weight: 100;
            font-size: 13px;
        }
        &:hover {
            .right_button {
                .strokeStyle(1px, @activeColor);
            }
            .right_button_text {
                stroke: @activeColor;
            }
        }
        &.red_text {
            .right_button_text {
                stroke: #ff6060;
            }   
            &:hover {
                .right_button {
                    .strokeStyle(1px, #ff6060);
                }
                .right_button_text {
                    stroke: #ff6060;
                }
            }
        }
    }
    .pod_rect {
        fill: #ffffff00;
        stroke: #8a8a8a;
        stroke-width: 1;
        height: 16px;
        &.green {
            stroke: #13C2C2;
            fill: #E9FDFD;
        }
        &.red {
            stroke: #F7313B;
            fill: #F3E3E4;
        }
    }
    .pod_status_text {
        font-size: 12px;
        stroke: #6f6f6f;
        stroke-width: 0.8px;
        &.green {
            stroke: #13C2C2;
        }
        &.red {
            stroke: #F7313B;
        }
    }
    .check_g_warp {
        cursor: pointer;
        .check_rect {
            .strokeStyle(1px, #e6e6e6);
            fill: #FFFFFF !important;
            width: 12px;
            height: 12px;
        }
        .check_mark {
            stroke: @activeColor;
            display: none;
        }
        &:hover {
            .check_rect {
                .strokeStyle(1px, @activeColor);
            }
        }
    }
    .abnormal_num_warp {
        .num_rect {
            fill: #f12f2f !important;
            width: 18px;
            height: 12px;
            &.warning {
                fill: #f1882f !important;
            }
        }   
        .num_text {
            fill: #FFFFFF;
            font-size: xx-small;
        }
    }
    .tooltip{
        rect{
            fill: #dcdcdc2e;
            stroke: #8a8a8a;
            stroke-width: 0.4;
        }
        text{
            fill: #6f6f6f;
        }
    }
}